<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>机器人销量地图</title>
  <script src="js/echarts.js"></script>
  <script src="js/chain.js"></script>
  <script src="https://cdn.staticfile.org/jquery/3.7.0/jquery.js"></script>
</head>
​

<body style="background-color: #2c313a">
  <div id="main" style="width: 100%; height:800px"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  var dataValue = [
    {
      "name": "深圳",
      "value": [114.271522, 22.753644],
      "Sales": "2台",
      "text": "机器人1"
    },
    {
      "name": "南京",
      "value": [118.46, 32.02],
      "Sales": "2台",
      "text": "机器人1"
    },
    {
      "name": "重庆",
      "value": [106.54, 29.59],
      "Sales": "1台",
      "text": "机器人1"
    },
    {
      "name": "北京",
      "value": [116.24, 39.55],
      "Sales": "3台",
      "text": "机器人1"
    },
    {
      "name": "荆州",
      "value": [113.41, 29.59],
      "Sales": "2台",
      "text": "机器人1"
    }
  ];

  option = {
    //设置一个标题
    title: {
      text: '设备销量',
      x: 'center',
      textStyle: {
        color: '#fff',
        fontSize: "40"
      }
    },
    //鼠标划过省份下弹框
    tooltip: {
      show: true,
      triggerOn: 'click'//点击生效
    },
    geo: {
      map: 'china',//必须写
      roam: false,// 拖拽功能；自选关闭开启
      zoom: 1.235,//地图缩放比例
      center: [105, 36],//地图位置
      //地图省份的样式；包括板块颜色和边框颜色
      itemStyle: {
        areaColor: '#f5f2f2',
        borderColor: "#835f5f",
      },
      //省份字体样式；包括是否展示，字体大小和颜色
      label: {
        normal: {
          show: true,
          fontSize: "11.5",
          color: "rgb(107,102,102)"
        }
      },
      //鼠标划过的高亮设置；包括省份板块颜色和字体等
      emphasis: {
        itemStyle: {
          areaColor: '#d0a3a3',
        },
        label: {
          show: true,
          color: "rgb(255,255,255)"
        }
      }
    },
    series: [
      //我们的散点
      {
        name: '销量',
        type: 'scatter',
        coordinateSystem: 'geo',//坐标系统
        data: dataValue,
        //地图点的样式；颜色，大小
        symbolSize: 12,
        itemStyle: {
          color: "#f13434",
          shadowBlur: 2,
          shadowColor: "#333"
        },
        //鼠标点击散点的下弹框
        tooltip: {
          show: true,
          triggerOn: "click",
          formatter: function (data1) {
            let data2 = data1.data;
            return "<b>销量<b><br>" + data2.name + data2.sales
          }
        },
      },
      //涟漪特效
      {
        name: "产品销量",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: dataValue,//传入的地图点数据
        symbolSize: 6,//涟漪大小
        showEffectOn: "render",
        //涟漪效应
        rippleEffect: {
          brushType: "stroke",
          color: "#f13434",
          period: 10,//周期
          scale: 10//规模
        },
        hoverAnimation: true,//悬停动画
        //地图点样式
        label: {
          formatter: "{b}",
          position: "top",
          show: true,
          fontSize: "10",
        },
        itemStyle: {
          color: "#f13434",
          shadowBlur: 2,
          shadowColor: "#333"
        },
        //鼠标点击散点的下弹框
        tooltip: {
          show: true,
          triggerOn: "click",
          formatter: function (data1) {
            console.log(data1)
            let data2 = data1.data;
            return "<b>销量<b><br>" + data2.name + data2.sales
          }
        },
        zlevel: 1
      }
    ]
  };
  myChart.setOption(option);

  //点击事件
  myChart.on('click', function (param) {
    let data = param.data;
    if (data) {
      console.log("城市：" + data.name + ";坐标：" + data.value + ";销量：" + data.sales);
    }
  });
</script>

</html>